<template>
	<div class="all">
        	<div class="content">
        		<img class="content-img" src="./images/20111611/preheating_01.png"/>
	            <img class="content-img" src="./images/20111611/preheating_02.png"/>
	            <img class="content-img" src="./images/20111611/preheating_03.png"/>
	            <img class="content-img" src="./images/20111611/preheating_04.png"/>
	            <div class="share" @click='gotoShare()' v-if='isapp'>
	              <img src="./images/20111611/preheating_05.png"/>
	            </div>
	            <div class="share" @click='gotoDownload()' v-else>
	              <img src="./images/20111611/preheating_06.png"/>
	            </div>            
        	</div>
        	<div class="shareTip" v-show='shareTip' @click='isshowback'>
        		<img src="./images/20111611/shareicon.png"/>
        	</div>
        <!-- 	<router-link to="/sign/city" class="banner__img__goto">
                      goto pre          
             </router-link>
			<router-link to="/active/20161111" class="banner__img__goto">
                       goto next          
             </router-link>	
             
           	 <transition name="router-slid" mode="out-in">
	            <router-view></router-view>
	          </transition> -->
     </div>
</template><!-- //header这个被渲染的组件，内部包含一个自己的内嵌的router-view，那个这个通过路由的操控是通过vuerouter中的children来配置的 -->
<script>
import $ from 'webpack-zepto';
$("title").html("趣学车11.11 学车史上最狂优惠");
let desc="狂抢优惠券，秒杀1111元学车，报名还有机会获得男／女朋友!!!";
let imgurl="http://7xwh8y.com1.z0.glb.clouddn.com/20161111share.png";
let link=location.href;
let title="趣学车11.11 学车史上最狂优惠";
let timelinetitle="趣学车11.11学车史上最狂优惠！三重惊喜，等你来拿！";
export default {
	data(){
		return {
              shareTip:false,
              isapp:false,
		}
	},
	created(){//这个钩子函数是在实例被创建之后data数据被渲染，但是template还没渲染之前,页面内容还未出现
		console.log('a is: ' + this.shareTip)
		if(GXC.isInApp){
				this.isapp = true;
		}else{
             this.isapp = false;
		}
	},
	components: {
          //组建声明
    },
	methods:{
		gotoShare(){
			
			console.log("去分享");
			if(GXC.isInApp){
				let scheme  = "QXCStudent://show/share?title="+title+"&description="+desc+"&thumbImage="+Base64.encode(imgurl)+"&urlToShare="+Base64.encode(link);
                 window.location.href = scheme;
			}else{
				this.shareTip = true;
			}
		},
		isInapp(){
			if(GXC.isInapp){
				return true;
			}
		},
		gotoDownload(){
				window.location="http://a.app.qq.com/o/simple.jsp?pkgname=com.goxueche.app";
		},
		isshowback(){
			this.shareTip = false;
		}
	}
};
</script>
<style lang="scss" scoped>
@import 'src/common/styles/mixins';
    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
   
    	
   .all{
    	width: 100%;
       .content{
    			width: 100%;
			img{
				width: 100%;
			}
		}
	   .shareTip{
			opacity: 0.9;
			position:fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom:0;
			background-color:#666666;
			z-index: 12;
			img{
				position:absolute;
				top:0;
				right: 0;
				display: block;
				width: px2rem(250);
				height: px2rem(265);
			}
		}
    }
</style>
<!-- v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。 -->
<!-- v-show 不支持 <template> 语法，也不支持 v-else。 -->
<!-- v-if可以用data声明的属性，也可以使用计算属性函数的返回值，来当判断值 -->
